import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import Counter from './components/Counter';
import counter from './reducers';

console.log('[index.js]  ->createStore');
const store = createStore(counter);
const rootEl = document.getElementById('root');

function render() {
    console.log('[index.js] ->render 渲染整个组件树');

    // 渲染整个组件树
    ReactDOM.render(
        <Counter
            value={store.getState()}
            onIncrement={() => {
                console.log('[index.js] ->按钮点击 onIncrement');
                console.log('[index.js] ->store.dispatch INCREMENT 之前');

                store.dispatch({ type: 'INCREMENT' });

                console.log('[index.js] ->store.dispatch INCREMENT 之后');
            }}
            onDecrement={() => {
                console.log('[index.js] ->按钮点击 onIncrement');
                console.log('[index.js] ->store.dispatch DECREMENT 之前');

                store.dispatch({ type: 'DECREMENT' });

                console.log('[index.js] ->store.dispatch DECREMENT 之后');
            }}
        />,
        rootEl
    );
}

console.log('[index.js] =>render()');
render();

console.log('[index.js] =>store.subscribe(render) 订阅 dispatchAction');
store.subscribe(render);


console.log('总结:')
console.log('1.编写一个React组件来渲染界面，包括四个按钮和一个数值。');
console.log('2.使用Redux来管理状态，即将计数器的当前数值托管在Redux的state中，还要提供加一和减一两个action来更新这个state。');
console.log('3.将Redux 的 state和发起action的方法通过props传递到组件中，并将state渲染为数值，将两个方法注册到按钮的点击事件上。');
console.log('4.最后渲染组件，并在每次state被更新时重新渲染组件。');


